<template>
    <div id="app">
        <div class="person-center-container">
            <div class="person-center-avatar">
                <img @click="goToPage(gridItems[4])" class="avatar-icon" :src="personInfo.headImg||'/h5_app/person.jpeg'">
            </div>
            <div class="person-name">{{personInfo.nickname?'昵称：'+personInfo.nickname:"微信用户"}}</div>
        </div>
        <div class="grid-container clearfix">
            <div class="grid-item" v-for="(gridItem, index) in gridItems" :key="index" @click="goToPage(gridItem)">
                <div class="grid-item-img">
                    <span :class='"icon icon-"+gridItem.icon'></span>
                    <span class="grid-item-name">{{gridItem.name}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import utils from '@utils'
import { get } from './api'

export default {
    name: 'app',
    mixins: [ utils.MixinBase ],
    data() {
        return {
            personInfo: {
            },
            gridItems: [
                {
                    name: '首页',
                    icon: 'home',
                    shortPageLink: 'index.html'
                },
                {
                    name: '我的订单',
                    icon: 'order',
                    shortPageLink: 'my_order.html?'
                },
                {
                    name: '购物车',
                    icon: 'cart',
                    shortPageLink: 'cart.html'
                },
                {
                    name: '附近商品',
                    icon: 'nearby',
                    shortPageLink: 'nearby_goods.html'
                },
                {
                    name: '个人资料',
                    icon: 'person_info',
                    shortPageLink: 'vip_info.html'
                },
                {
                    name: '关于我们',
                    icon: 'about_us',
                    shortPageLink: 'about_us.html'
                }
            ]
        }
    },
    mounted() {
        this.wechatInit().then(()=> {
            this.wechatConfigInit().then(()=> {
                var shareOptions = {
                    shareTitle: "坚冰商务",
                    shareDesc: "亲！还在等什么，快来看看！",
                    shareUrl: utils.createAuthLink("index.html"),
                    sharePic: ''
                }

                utils.shareHandler({
                    type: 'timeLine',
                    ...shareOptions
                })

                utils.shareHandler({
                    type: 'appMessage',
                    ...shareOptions
                })
                this.$indicator.close();
            });
            this.init();
        }, ()=> {
            this.init();
        });
    },
    methods: {
        init() {
            get().then((data) => {
                this.personInfo = data||{};
            })
        },
        goToPage(gridItem) {
            utils.goToPage(gridItem.shortPageLink);
        }
    }
}
</script>

<style>
html,body {
    height: 100%;
}
.person-center-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 1;
}
.avatar-icon {
    width: 80px;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,.2);
}
.person-name {
    margin-top: 4px;
    color: #333;
    font-size: 14px;
}

.grid-container {
    border-top: 1px solid #64a9b8;
    height: 9rem;
    width: 100%;
}
.grid-container img {
    display: flex;
    width: 1rem;
    margin: 0 auto;
}
.grid-item-name {
    padding: 6px 0;
    display: block;
}
.grid-item-name ,.grid-item-img .icon {
    color: #333;
}

.grid-item {
    width: 50%;
    float: left;
}
.grid-item-img .icon {
    font-size: 30px;
}
.grid-item:not(:nth-child(2n)) .grid-item-img {
    border-right: 1px solid #64a9b8;
}
.grid-item .grid-item-img {
    border-bottom: 1px solid #64a9b8;
    flex: 1;
    height: 3rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    flex-direction: column;
}

</style>
